<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：v-model双向绑定</h1>
       
            <h3>
                我们可以使用v-model指令在表单的各种DOM 元素进行双向数据绑定，它会根据我们的控件类型自动更新元素
                同事，它会忽略所有表单元元素value，checked，selected
            </h3>    
            <h3>1.单行文本框</h3>    
            <input type="text" v-model="aa">{{aa}}
            <h3>2.多行文本框</h3>
            <textarea v-model="multitext"></textarea>{{multitext}}
            <h3>3.单选框</h3>
                <h4>单选框在实际中是不能单独使用的，一般是两个及以上，可以设置一个共有的v-model中的变量
                    那么就可以实现radiogroup的效果
                </h4>
                <input type="radio" value="A" v-model="radiovalue">a
                <input type="radio" value="B" v-model="radiovalue">b
                <input type="radio" value="C" v-model="radiovalue">c
                <input type="radio" value="D" v-model="radiovalue">d
                <input type="radio" value="E" v-model="radiovalue">e
                <input type="radio" value="F" v-model="radiovalue">f
                {{radiovalue}}
            <h3>4.单个复选框：单个复选框通常用来true或者false的选择</h3>
                <input type="checkbox"  v-model="checkvalue">是否天生丽致{{checkvalue}}
            <h3>5.多个复选框：v-model接数组类型的变量</h3>
                <input type="checkbox" v-model="checkvalue1" value="漂亮">A.回眸一笑百媚生    
                <input type="checkbox" v-model="checkvalue1" value="前夕">B.八百里奔踏将去    
                <input type="checkbox" v-model="checkvalue1" value="厉害">C.大大撒大多数    
                <input type="checkbox" v-model="checkvalue1" value="啊啊">D.我们的游戏正在蒸蒸日上
                {{checkvalue1.join(',')}}    
            <h3>6.单项下拉框</h3>
                <select v-model="selectvalue" >
                    <option value="杭州">杭州</option>
                    <option value="温州">温州</option>
                    <option value="台州">台州</option>
                    <option value="苏州">苏州</option>
                    <option value="衡州">衡州</option>
                </select>
                {{selectvalue}}
            <h3>7.多项下拉选择框</h3>
                <select multiple v-model="multipleselect">
                    <option value="杭州">杭州</option>
                    <option value="温州">温州</option>
                    <option value="台州">台州</option>
                    <option value="苏州">苏州</option>
                    <option value="衡州">衡州</option>
                </select>    
                {{multipleselect}}
        <h1>知识点2：v-model修饰符</h1>
            <h3>1.lazy修饰符 v-model  在每次input触发后将输入框的值与数据进行同步，添加lazy修饰符后。转变为change事件同步</h3>
            <input type="text" v-model.lazy="text">{{text}}
            <h3>2.number修饰符：可以将用户输入的值转化为数字型</h3>
            <input type="text" v-model.number="num">{{num+1}}
            <h3>3.trim修饰符：可以自动过滤前后的空白字符</h3>
            <input type="text" v-model.trim="text">{{text+"你好"}}        
    </div>
</body>
</html>
<script>
    const appConn = Vue.createApp({
        data() {
            return {
                aa:'',
                multitext:'',                    
                radiovalue:'',
                checkvalue:'',
                checkvalue:false,
                checkvalue1:[],
                selectvalue:'',
                multipleselect:'',
                text:'',
                num:1
            }
        },



    }).mount("#app")



</script>